<template>
	<view class="share-item mb-20">
		<!-- 关闭按钮 -->
		<view class="iconfont icon-cuo" @tap.stop="open"></view>
		<!-- 笔记 -->
		<view style="word-wrap: break-word;padding: 0 8px;"
			v-if="info.collectType === 'TXT' && info.collectData != null" class="fs-28"> {{ info.collectData.text }}
		</view>

		<!-- 语音 -->
		<!-- <view v-if="info.collectType === 'VOICE'">
			<view style="display: inline-block; transition: color 0.5s"
				:style="voice_src == info.content ? 'color:#D93025;' : ''" @tap.stop="to_play">
				<text v-if="info.mine" style="display: inline-block" :style="{ 'padding-right': width + 'rpx' }"></text>
				<text class="iconfont icon-shengbo fs-28"></text>
				<view style="display: inline-block"></view>
				<text style="margin-left: 20rpx" class="fs-30">{{ info.time }}″</text>
				<text v-if="!info.mine" :style="{ 'padding-right': width + 'rpx' }"></text>
			</view>
		</view> -->
		<!-- 图片 -->
		<view v-if="info.collectType === 'IMG'">
			<qq-image @click="openimfUrl(info.collectData.imageInfoArray[0].imageUrl)"
				:url="info.collectData.imageInfoArray[0].imageUrl" :imageStyle="style"></qq-image>
		</view>
		<!-- <view class="footer mt-20 flex flex-x-b">
			<view class="from fs-24" v-if="info.chatType === 'group'">
				{{ info.groupName }}
			</view>
			<view v-else></view>
			<view class="date fs-24">
				{{ info.sendTime }}
			</view>
		</view> -->

		<!-- 视频 -->
		<view v-if="info.collectType === 'VIDEO'" class="videoImg_icon">
			<!-- <view class="iconfont muted-box icon-shengbo"></view> -->
			<img style="width: 100rpx;height: 100rpx;" class="muted-box" src="https://fgxfile.fagexin.online/fgx/17395133734858087.png"></img>
			<!-- <qq-image url="…n9A//c41XE0Lo4V3/CTAAFPSPXCEbSD0AAAAASUVORK5CYII="></qq-image> -->
			<qq-image :url="info.collectData.thumbUrl" :imageStyle="style"
				@click="playVedio(info.collectData.videoUrl)"></qq-image>
		</view>
		<video v-if='isplayVideo' id="videoPlayer" ref="videoPlayer" :src="info.collectData.videoUrl" controls autoplay
			object-fit="cover" style="width: 100%; height: 100vh;" @play="onPlay" @pause="onPause"></video>
		<!-- 文件 -->
		<view v-if="info.collectType === 'FILE'" class="flex" @click="openfileUrl(info.collectData.fileUrl)">
			<view>
				<img style="width: 100rpx;height: 100rpx;" src="https://fgxfile.fagexin.online/fgx/1739513337362555.png"></img>
			</view>
			<view class="fs-28" style="word-wrap: break-word;padding: 0 8px;width: calc(100% - 100rpx);">
				{{info.collectData.fileName}}</view>
		</view>

		<!-- 删除提示 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="error" cancelText="关闭" confirmText="确定" title="提示" content="是否删除该条收藏记录？"
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import api from '../api/collect'
	export default {
		props: {
			info: {
				type: Object,
				default: () => ({}),
			}

		},
		data() {
			return {
				style: "width:200rpx;height:200rpx;border-radius:15rpx;",
				FILEstyle: "width:80rpx;height:80rpx;",
				width: 0,
				isplayVideo: false,
			};
		},
		onReachBottom() {
			console.log('被触发了')
			
		},
		computed: {
			// voice_src() {
			// 	return this.$store.state.voice_src;
			// },
		},
		methods: {
			onPlay() {
				console.log('视频开始播放');
			},
			onPause() {
				console.log('视频暂停');
			},
			playVedio(videoUrl) {
				// #ifdef APP-PLUS
				this.isplayVideo = !this.isplayVideo
				// #endif

				// #ifdef H5
				window.location.href = videoUrl;
				// #endif
			},
			openfileUrl(fileUrl) {
				// #ifdef H5
				window.open(fileUrl, '_blank');
				// #endif

				// #ifdef APP-PLUS
				uni.downloadFile({
					url: fileUrl,
					success: (res) => {
						if (res.statusCode === 200) {
							const localPath = res.tempFilePath;
							uni.openDocument({
								filePath: localPath,
								success: function() {
									console.log('文件打开成功');
								},
								fail: function(err) {
									console.error('文件打开失败', err);
								}
							});
						} else {
							console.error('文件下载失败');
						}
					},
					fail: (err) => {
						console.error('文件下载失败', err);
					}
				});
				// #endif


			},
			openimfUrl(imageUrl) {
				window.open(imageUrl, '_blank');
			},
			async dialogConfirm() {
				let formData = {
					userId: this.info.userId,
					ids: [this.info.id]
				}

				this.request({
					url: '/tencentCollect/cancelCollect',
					loading: true,
					data: formData,
					method: 'POST',
					loading: true,
				}).then(res => {
					if (res.status == 200) {
						this.showToast('删除成功！')
						this.dialogClose()
						this.$emit('refresh')
					}
				});
			},
			open() {
				this.$refs.alertDialog.open()
			},
			dialogClose() {
				this.$refs.alertDialog.close()
			},
			to_play() {
				if (!getApp().globalData.voice) {
					getApp().globalData.voice = uni.createInnerAudioContext();
					getApp().globalData.voice.sessionCategory = "ambient";

					getApp().globalData.voice.onEnded(() => {
						this.vuexSet("voice_src", "");
					});
				}
				if (getApp().globalData.voice.src != this.info.content) {
					//如果不是当前
					getApp().globalData.voice.src = this.info.content;
					getApp().globalData.voice.play();
					this.vuexSet("voice_src", this.info.content);
				} else {
					if (getApp().globalData.voice.paused == false) {
						//如果正在播放
						getApp().globalData.voice.pause();
						this.vuexSet("voice_src", "");
					} else {
						//如果已经暂停
						getApp().globalData.voice.play();
						this.vuexSet("voice_src", this.info.content);
					}
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.videoImg_icon {
		position: relative;

		.muted-box {
			position: absolute;
			top: 50%;
			left: 15%;
			transform: translate(-50%, -50%);
			z-index: 99;



		}
	}

	.share-item {
		margin: 20rpx 30rpx;
		padding: 20rpx;
		border-radius: 20rpx;
		background: #ffffff;
		position: relative;

		.icon-cuo {
			font-size: 26rpx;
			position: absolute;
			right: 10rpx;
			top: 10rpx;
		}

		.footer {
			font-size: 16rpx;
			color: #999999;
		}
	}
</style>